<style scoped lang="scss" type="text/scss">
  @import '~variables';

  .book-img{
    width: 170px;
    height: 235px;

    img{
      width: 100%;
      height: 100%;
    }
  }
  .info{
    height: 235px;
  }
  .list{
    ul:first-child{
      display: inline-block;
      width: 100%;

      li{
        width: 33.3%;
        display: inline-block;
        line-height: 35px;
      }
    }
  }
  .title-btn{
    padding-right: 2px;
  }
  .more-text{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 35px;
    width: 80%;
  }
</style>

<template>
  <div>
    <v-header></v-header>
    <div class="main-style">
      <Breadcrumb>
        <BreadcrumbItem to="/">首页</BreadcrumbItem>
        <BreadcrumbItem :to="{ path: `/${this.$route.params.code}` }">{{ $route.params.code }}</BreadcrumbItem>
        <BreadcrumbItem>{{ $route.query.name }}</BreadcrumbItem>
      </Breadcrumb>

      <div class="basic-info padding-top padding-bottom flex" style="justify-content: start;align-items: flex-start;">
        <div class="book-img float-left">
          <img src="https://easyreadfs.nosdn.127.net/tI6pxeP-7Fk_NUEvxiZMnQ==/8796093023975405710">
        </div>
        <div class="info position-relative margin-left flex-item">
          <div>
            <b class="font-l font-bold-700 width-100 block">{{ bookInfo.title }}</b>
            <span class="font-m width-100 block">火烧风 著</span>
          </div>
          <p class="margin-top" style="white-space:normal;line-height: 20px;">{{ bookInfo.description }}</p>

          <div class="operate position-absolute" style="bottom: 0;">
            <div v-if="isMobile">
              <Button type="primary" size="small" @click="read">立即阅读</Button>
              <Button size="small" :disabled="disabled" @click="addBook">加入书架</Button>
            </div>
            <div v-else>
              <Button type="primary" size="large" @click="read">立即阅读</Button>
              <Button size="large" :disabled="disabled" @click="addBook">加入书架</Button>
            </div>
            <!--<Button size="large" :disabled="disabled">已加入书架</Button>-->
          </div>
        </div>
      </div>
      <div class="padding-top">
        <Tabs v-model="tabVal">
          <TabPane label="最近更新" name="new"></TabPane>
          <TabPane :label="`目录(${data.total}章)`" name="list"></TabPane>
        </Tabs>

        <div class="new" v-if="tabVal === 'new'">
          <Button type="text" class="align-left width-100" style="padding: 0;">
            <div class="title-info">
              <b class="font-bold-700 font-m">{{ lastContent.title }}</b>
              <div class="float-right">
                <span>更新日期：{{ lastContent.updateTime }}</span>
              </div>
            </div>
            <!--<p class="padding-top" style="word-wrap: break-word;word-break: normal;">见到大家都答应下来，欧阳嫣然微微点头，接着单手一翻。</p>-->
          </Button>
        </div>

        <div class="list padding-bottom-l" v-else>
          <ul class="width-100">
            <li v-for="item in listDatas" :key="item.id" class="border-bottom">
              <Button type="text" @click="toRead(item)" class="title-btn" :class="{ 'more-text': isMobile }">{{ item.title }}</Button>
              <i class="ivu-icon ivu-icon-locked font-lighter" v-if="item.coin > 0"></i>
            </li>
          </ul>
          <Page size="small" class="margin-top float-right" :current="listPage.current" :total="listPage.total" show-elevator @on-change="changePage"></Page>
        </div>
      </div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
  export default {
    name: 'book-section',
    data () {
      return {
        tabVal: 'new',
        data: {
          total: 500
        },
        listDatas: [],
        listPage: {
          current: 1,
          size: 30,
          total: 0
        },
        disabled: false,
        bookInfo: {},
        isMobile: false,
        lastPage: 0,
        lastContent: {}
      }
    },
    created () {
      if (screen.width < 768) {
        this.isMobile = true
      } else {
        this.isMobile = false
      }
      this.fetchData()
    },
    methods: {
      fetchData () {
        this.$http.get('/api/book/getBookDetail',{
          bid: this.$route.params.id,
          pageNum: this.listPage.current,
          pageSize: this.listPage.size
        })
          .then((res) => {
            if (res) {
              this.bookInfo = res.bookInfo
              this.listDatas = res.result.list
              this.listPage.total = res.result.total
              this.data.total = res.result.total

              this.$http.get('/api/book/getBookDetail',{
                bid: this.$route.params.id,
                pageNum: res.result.lastPage,
                pageSize: this.listPage.size
              })
                .then((resp) => {
                if (resp) {
                  console.log(resp.result.list.length - 1)
                  this.lastContent = resp.result.list[resp.result.list.length - 1]
                }
                })
            }
          })
      },
      // 改变页数
      changePage (val) {
        this.listPage.current = val
        this.fetchData()
      },
      // 跳转至某一章节的内容
      toRead (data) {
//        if (data.coin > 0) {
//          this.$Modal.warning({
//            title: '',
//            content: '请充值后再阅读本章内容',
//            okText: '去充值',
//            cancelText: '取消',
//            onOk: () => {
//              this.$router.push('/my/recharge')
//            },
//            onCancel: () => {
//              console.log('取消了')
//            }
//          })
//        }
        this.$router.push({
          path: `${this.$route.path}/${data.id}`
        })
      },
      // 立即阅读
      read () {
        let one = this.listDatas[0].id
        this.$router.push(`${this.$route.path}/${one}`)
      },
      // 加入书架
      addBook () {
        this.$http.post('/api/book/markBook',{
          bid: this.$route.params.id,
          isAdd: true
        })
          .then((res) => {
            if (res) {
              this.$Message.success('已加入书架')
              this.disabled = true
            }
          })
      }
    }
  }
</script>
